<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar @handleSearch="init"
                placeHolder="请输入..." />
    <!-- 停驶奖励数据列表 -->
    <table-data-el :tableData="tableData.list"
                   :tableLabel="tableLabel"
                   :page.sync="page"
                   :pageSize.sync="pageSize"
                   :pageCount="tableData.rows"
                   :v-loading="loading"
                   @handleBound="handleBound"
                   @handleRemoteBound="remoteBound" />
    <!-- 限制添加弹框 -->
    <el-dialog :title="boundTitle"
               :visible.sync="isShowDialog"
               center
               width="30%"
               @close=" Object.keys(form).map((key) => form[key] = ''),$refs['ruleForm'].resetFields()">
      <template>
        <el-form :rules="rules"
                 ref="ruleForm"
                 :model="form"
                 label-width="80px">
          <el-form-item label="退费限制"
                        prop="name">
            <el-input v-model="form.name"
                      placeholder="请输入退费限制"></el-input>
          </el-form-item>
          <el-form-item label="退费金额"
                        prop="money">
            <el-input v-model="form.money"
                      placeholder="请输入退费金额"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template slot="footer">
        <el-button type="primary"
                   @click="confirmAddBound('ruleForm')">保存</el-button>
        <el-button type="danger"
                   @click="isShowDialog = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'

    export default {
  name: "stopRewards",
  data () {
    return {
      tableData: [], //停驶奖励数据列表
      tableLabel: [
        {
          label: ' 设置人',
          prop: 'create_preason'
        },
        {
          label: '设置时间',
          prop: 'create_time'
        },
        {
          label: '退费金额',
          prop: 'money'
        },
        {
          label: '退费限制',
          prop: 'name'
        },
        {
          label: '修改',
          detail: true,
          btnText: '修改',
          methodName: 'handleBound',
          key: 1,
        },
        {
          label: '添加',
          detail: true,
          btnText: '添加',
          methodName: 'handleBound'
        },
        {
          label: '删除',
          detail: true,
          btnText: '删除',
          methodName: 'handleRemoteBound'
        }
      ], //停驶奖励数据列表对应的数据
      page: 1, //停驶奖励数据列表当前页
      pageSize: 8, //停驶奖励数据列表条数/页
      searchKey: '', //搜索关键字
      loading: false,
      isShowDialog: false, //弹框显示隐藏
      form: {
        name: '',
        money: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入退费限制', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入退费金额', trigger: 'blur' }
        ]
      },
      boundTitle: '',//限制修改|| 删除弹框title
      dialogType: '',
      limitId: ''
    }
  },
  components: {
    tableDataEl
  },
  methods: {
    async init (search = this.searchKey, activeDate) {  //页面初始化
      if (activeDate === null || activeDate === undefined) activeDate = ['', ''];
      let paramsObj = {
        page: this.page,
        pageSize: this.pageSize,
        search,
        start_time: activeDate[0],
        end_time: activeDate[1]
      };
        let res = await this.api.stopRewards(paramsObj);
      this.tableData = res.data;
      this.loading = false;
    },
    handleBound (...value) {
      if (value[0]) {
        this.dialogType = 1;
          this.boundTitle = '限制修改';
        this.limitId = value[1]['id'];
        Object.assign(this.form, { name: value[1]['name'], money: value[1]['money'] });
      } else {
        this.dialogType = 0;
        this.boundTitle = '限制添加'
      }
      this.isShowDialog = true;
    },
    confirmAddBound (formName) { //添加限制 ||修改限制
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogType === 0) {
            this.api.addBound(this.form).then(res => {
              this.$message({
                type: res.code === 1 ? 'success' : 'error',
                message: res.msg
              });
              this.init();
              this.isShowDialog = false;
            })
          } else {
            this.api.mdfLimit(Object.assign({}, this.form, { id: this.limitId })).then(res => {
              this.$message({
                type: res.code === 1 ? 'success' : 'error',
                message: res.msg
              });
              this.init();
            });
            this.isShowDialog = false;
          }

        } else {
          return false;
        }
      })
    },
    async remoteBound (...value) {
        let res = await this.api.removeBound({id: value[1]['id']});
      this.$confirm('此操作将永久删除该限制，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.api.removeBound({ id: value[1]['id'] }).then(res => {
          this.$message({
            type: res.code === 1 ? 'success' : 'error',
            message: res.msg
          });
          this.init();
        })
      }).catch(() => {

      })
    }
  },
  watch: {
    page () {
      this.init()
    },
    pageSize () {
      this.init()
    }
  },
  mounted () {
    this.init()
  },
  beforeMount () {
    this.loading = true;
  }
}
</script>

<style scoped>
</style>
